<template>
	<view class="login-container">
		<view class="tips">
			<text class="title">您好，</text>
			<text class="line">欢迎来到项目物料信息化管控平台！</text>
			<text class="line">仅限内部员工使用！</text>
		</view>
		
		<div class="loginform">
			<u-form :model="form" ref="uForm" label-width="120">
				<u-form-item label="用户名" prop="username">
					<u-input v-model="form.username" placeholder="请输入用户名" />
				</u-form-item>
				<u-form-item label="密码" prop="password">
					<u-input v-model="form.password" type="password" placeholder="请输入密码" />
				</u-form-item>
			
				<button class="formbtn" @click="formLogin" :loading="btnLoading">登录</button>
			</u-form>
		</div>
		
		<div class="btn-box">
			<button v-if="!isAuth" class="wechat-btn" @click="login">
				<u-icon size="70" name="weixin-fill" color="rgb(83,194,64)"></u-icon>
			</button>
			<button v-else class="phonebtn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
				>微信授权</button>
		</div>
		
		<project-select :isShow="isShow" popup-title="请选择项目" :localdata="projectTree" @handleClose="isShow = false" @complete="proChange"></project-select>
	</view>
</template>

<script>
	import {encryption} from '@/common/utils'
	import qs from "qs"
	import projectSelect from "@/components/u-select.vue";
	export default{
		components: {
			projectSelect
		},
		data(){
			return {
				isAuth:false,//是否需要授权
				code:"",
				btnLoading:false,
				form:{
					username:'',
					password:'',
					randomStr: "blockPuzzle",
				},
				//项目选择
				projectList: [],
				projectTree: [],
				isShow: false,
			}
		},
		methods:{
			formLogin(){
				if(this.btnLoading) return false
				const user = encryption({
					data: this.form,
					key: 'pigxpigxpigxpigx',
					param: ['password']
				  })
				  this.btnLoading = true
				  let dataObj = qs.stringify({'username': user.username, 'password': user.password})
				  this.$u.api.login(`randomStr=blockPuzzle&grant_type=password`,dataObj).then(async res => {
					this.$u.vuex('vuex_userInfo',JSON.stringify(res))
					
					let authList = []
					res.user_info.authorities.map(item => {
						authList.push(item.authority)
					})
					this.$u.vuex('vuex_authList',JSON.stringify(authList))
					this.getProjects()
					this.btnLoading = false
				  })
				  
			},
			login(){
				if(this.btnLoading) return false
				uni.login({
				  provider: 'weixin',
				  success: (loginRes) => {
					this.code = loginRes.code
					this.btnLoading = true
					this.$u.api.loginByWechat(loginRes.code).then( async res => {
						if(res.code == 2){
							this.isAuth = true
							this.btnLoading = false
							return false
						}
						if(res.code != 0){
							this.$u.toast(res.msg)
							this.btnLoading = false
							return false
						}
						
						this.$u.vuex('vuex_userInfo',JSON.stringify(res.data))
						let authList = []
						res.data.user_info.authorities.map(item => {
							authList.push(item.authority)
						})
						this.$u.vuex('vuex_authList',JSON.stringify(authList))
						this.getProjects()
						this.btnLoading = false
					})
				  }
				});
			},
			getPhoneNumber(e){
				if(this.btnLoading) return false
				this.btnLoading = true
				this.$u.api.bindwechat(`state=MINI&program=MATERIALS&encryptedData=${e.detail.encryptedData}&iv=${e.detail.iv}&code=${this.code}`).then(async res => {
					if(res.code != 0){
						this.$u.toast("该号码未在平台注册")
						this.btnLoading = false
						this.isAuth = false
						return false
					}
					
					this.$u.vuex('vuex_userInfo',JSON.stringify(res.data))
					res.data.user_info.authorities.map(item => {
						authList.push(item.authority)
					})
					this.getProjects()
					this.btnLoading = false
				})
			},
			//跳转至项目首页
			proChange(e) {
				this.isShow = false
				let data = {
					deptId:e.value,
					name:e.text
				}
				//本地存储项目
				this.$u.vuex('vuex_project', JSON.stringify(data))
				
				uni.switchTab({
					url: "/pages/matter/index"
				})
			},
			//获取项目列表
			getProjects() {
				this.$u.api.getProjects().then(res => {
					let projectArr = []
					res.data.map(item => {
						if (item.deptType == 3) projectArr.push(item)
					})
					if (projectArr.length == 1) {
						//本地存储项目id
						this.$u.vuex('vuex_project', JSON.stringify(projectArr[0]))
						uni.switchTab({
							url: "/pages/matter/index"
						})
						return false
					}
					this.projectList = res.data
					this.projectTree = this.buildTree()
					this.isShow = true
				})
			},
			buildTree(list = [], pid = 0) {
				this.projectList.filter(item => {
					if (item.parentId === pid) {
						if (!item.children) {
							item.children = []
						}
						item.children = this.buildTree([], item.deptId)
						list.push({
							text:item.name,
							value:item.deptId,
							parentId:item.parentId,
							children:item.children
						})
					}
				})
				return list
			},
			
			
		}
	}
</script>

<style scoped lang="scss">
	.login-container {
		padding: 90rpx 30rpx;
	
		.tips {
			display: flex;
			flex-direction: column;
	
			.title {
				font-size: 48rpx;
				color: #111F2C;
				font-weight: 600;
			}
	
			.line {
				padding-top: 6rpx;
				font-size: 28rpx;
				color: #798188;
			}
		}
		.wechat-btn{
			width: 90rpx;
			height: 90rpx;
			border-radius: 100%;
			border: 1px solid #eee;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0;
			&::after{
				display: none;
			}
		}
		.btn-box{
			position: fixed;
			left: 0;
			right: 0;
			bottom: 200rpx;
		}
		.phonebtn {
			width: 90rpx;
			height: 90rpx;
			border-radius: 100%;
			border: 1px solid #eee;
			display: flex;
			padding: 0;
			color: #333;
			justify-content: center;
			align-items: center;
			font-size: 24rpx;
			line-height: 1.4;
			padding: 0 10rpx;
			&::after{
				display: none;
			}
		}
		.loginform{
			padding: 100rpx 20rpx;
			.formbtn{
				height: 80rpx;
				background: #eee;
				border-radius: 45rpx;
				border: none;
				display: flex;
				padding: 0;
				color: #333;
				justify-content: center;
				align-items: center;
				font-size: 32rpx;
				margin-top: 50rpx;
				&::after{
					display: none;
				}
			}
		}
	}
</style>
